import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined, DownOutlined, SmileOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { homeRoutes } from '../../Router/routerConfig';
import { RouteItem } from '../../utils/type';
import { Dropdown, Space } from 'antd';
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import './Index.css'
import { remove } from 'lodash';
import { hock } from '../hock/hock';
const { Header, Content, Footer, Sider } = Layout;

hock()
const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
         模版中心
      </a>
      
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        设计场景
      </a>
    ),


  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
       收拾收拾
      </a>
    ),

  }

];
//取出obj
const user=JSON.parse(localStorage.getItem("obj") as string)
const App: React.FC = () => {
  const navigate = useNavigate()
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const crr = (arr: RouteItem[]) => {
    let temp: any[] = [];
    arr.map((item, index) => {
      temp.push({
        key: `${index}`,
        icon: React.createElement(LaptopOutlined),
        label: <NavLink to={item.path}>{item.title}</NavLink>
      })
    })
    return temp
  }
  const tui=()=>{
    navigate('/login')
  }
  const sheji=()=>{
    navigate('/job')
  }
  return (
    <Layout>
      <Header style={{
        display: 'flex', alignItems: 'center', background: '#fff',
        borderBottom: "solid #ccc 1px"
      }}>

        <div className="demo-logo" >
     
          <img src={require('../../img/kehua.png')} alt="" className='kehua' />

          <Dropdown menu={{ items }} >
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <a>模版素材</a>
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>


          <Dropdown menu={{ items }} className='hu'>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                设计场景
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>

          <Dropdown menu={{ items }} className='hu'>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                资源教程
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>


          <Dropdown menu={{ items }} className='hu'>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                订阅方案
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>

          <Dropdown menu={{ items }} className='hu'>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                可画AI
       
              </Space>
            </a>
          </Dropdown>

          <Dropdown menu={{ items }} className='hu'>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                客户端
           
              </Space>
            </a>
          </Dropdown>



        </div>

        <div className='tubiao'>
          <div className='zu'>
            <img src={require('../../img/电脑.png')} alt="" />
            <img src={require('../../img/设置.png')} alt="" />
            <img src={require('../../img/铃声、提醒.png')} alt="" /></div>
          <button onClick={()=>sheji()}>创建设计</button>
          {/* <img src={require('../../img/bb.jpg')} alt="" className='touxiang' /> */}
          {
            localStorage.getItem("token") && localStorage.getItem("token") ? 
            <div className='yong'>用户名:<div className='zi' onClick={tui}>{user && user.username}</div><div><img src={user.url} style={{ width: '30px', height: '30px', borderRadius: "50%" }}></img></div>

            </div> : <div onClick={() => { navigate("/login") }} className='dl'>登录/注册</div>
          }


        </div>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}

          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>


      <Layout>
        <Sider style={{ background: colorBgContainer }} width={200} className='box'>
          <div className='demo-logo' style={{ width: '100%', height: '150px' }}>
            <img className='img1' style={{ width: '50px', height: '50px' }} src={require('../../img/aa.jpg')} alt="" />

            <h4>个人品牌</h4>
            <p>免费版</p>

            {
              sessionStorage.getItem('token') ? <div className='box'>

                {JSON.parse(sessionStorage.getItem('obj') as string).user}
              </div> : ''
            }
          </div>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
            items={crr(homeRoutes) as any}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>

          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default App;